<template>
  <view class="order_index">
    <!-- <header class="top">
      <text>消费记录</text>
      <view class="picker">
        <picker @change="bindPickerChange" :value="oilIndex" :range="actions" range-key="name">
          <view class="text">{{actions[oilIndex].name}}</view>
        </picker>
        <text class="icon"></text>
      </view>
    </header> -->
    <view style="text-align: center;margin-top:0.5rpx" v-if="consumeList.length == 0">您暂未此类型消费记录</view>
    <section class="center">
      <navigator :url="`./_id?orderNo=${ele.orderNo}`" class="item" v-for="ele in consumeList"
        :key="ele.orderNo">
        <view class="order-top">
          <view class="cont">{{
              (ele.payType == "wx" ? "微信" : "") +
              (ele.payType == "zfb" ? "支付宝" : "") +
              (ele.payType == "dzk" ? "电子卡" : "")
            }} - {{
              ele.stationName
            }}</view>
            <text class="cont-success">{{ '交易成功' }}</text>
        </view>
        <view class="line"></view>
        <view class="order-bottom">
          <view class="time">加油日期：{{ ele.createdDate }}</view>
          <view class="right">
            <view class="right-amt">￥{{ ele.amt }}</view>
            <view class="right-coupon">优惠￥{{ ele.discountAmt + ele.discountCouponAmt }}</view>
          </view>
        </view>
      </navigator>
    </section>
    <footer class="bottom" v-if="total > consumeQuery.pageSize">
      <uni-pagination :total="total" :current="consumeQuery.pageNum" :pageSize="consumeQuery.pageSize" title="标题文字"
        @change="pageChange" />
    </footer>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        total: 0,
        actions: [{
            name: "全部",
            value: ""
          },
          {
            name: "92#",
            value: "92#"
          },
          {
            name: "0#",
            value: "0#"
          },
        ],
        show: false,
        selected: {
          name: "全部",
          value: ""
        },
        consumeQuery: {
          enterpriseId: undefined,
          mobilePhone: undefined,
          stationId: undefined,
          oilName: undefined,
          pageNum: "1",
          pageSize: "10",
        },
        consumeList: [],
        oilIndex: 0,
      }
    },
    created() {
      this.getChargeList();
    },
    
    methods: {
      pageChange(e) {
        console.log(e.current)
        this.consumeQuery.pageNum = e.current
        this.getChargeList()
      },
      bindPickerChange(e) {
        this.oilIndex = e.detail.value
        this.getChargeList();
      },
      async getChargeList() {
        try {
          this.consumeQuery.oilName = this.actions[this.oilIndex].value
          this.consumeQuery.enterpriseId = this.enterpriseId;
          this.consumeQuery.mobilePhone = this.phoneNumber;
          const amountData = await this.$Request({
            url: "/getUserOrderListByUnionId",
            method: "GET",
            data: this.consumeQuery
          });
          if (amountData.retCode !== 0) {
            throw new Error(amountData.message);
          }
          console.log("amountData", amountData);

          this.consumeList = amountData.data.list;
          this.total = amountData.data.total;

          // this.chargeList = amountData.data;
        } catch (error) {
          console.log(error)
        }
      },
    }
  }
</script>

<style lang="scss">
  .order_index {
    padding: 40rpx;
    padding-bottom: 0;
    width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: #f5f5f5;

    .top {
      background-color: #f8f8f8;
      overflow: hidden;
      padding: 20rpx 25rpx;
      display: flex;
      justify-content: space-between;
      text-align: center;
      font-size: 25rpx;
      
      .picker{
        display: flex;
        align-items: center;
        .icon {
          margin-top: 5rpx;
          margin-left: 10rpx;
          display: inline-block;
          width: 20rpx;
          height: 15rpx;
          background: url("../static/icon/1_b01_down.2x.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

    }

    .center {
      display: flex;
      flex-direction: column;

      >.item {
        width: 100%;
        height: 210rpx;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 30rpx 25rpx;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        margin-bottom: 20rpx;

        .order-top {
          display: flex;
          justify-content: space-between;
          .cont {
            color: #292929;
            font-size: 26rpx;
            font-weight: bold;
          }
          .cont-success {
            font-size: 26rpx;
          }
        }

        .line {
          width: 100%;
          height: 1px;
          background-color: #f5f5f5;
          margin: 14rpx 0;
        }

        .order-bottom {
          display: flex;
          justify-content: space-between;
          
          .time {
            color: #666;
            font-size: 24rpx;
          }
          .right {
            display: flex;
            flex-direction: column;
            .right-amt {
              font-size: 26rpx;
              text-align: right;
            }
            .right-coupon {
              margin-top: 10rpx;
              font-size: 26rpx;
              color: #f09006;
            }
          }
        }

        .add {
          color: #c5ac61;
        }
      }
    }

    .bottom {
      width: 100%;
    }
  }
</style>
